<template>
  <div class="zhtt-header" :class="{ hidden: store.state.isFullscreen }">
    <div class="logo" @click="router.push('/')">
      logo
    </div>
    <div class="search">
      <a-input-search
          v-model:value="value"
          placeholder="请输入搜索关键字"
          @search="onSearch"
      />
    </div>
    <div class="menus">
      <a-menu v-model:selectedKeys="current" mode="horizontal">
        <a-menu-item key="mail">
          <template #icon>
            <question-outlined />
          </template>
          帮助
        </a-menu-item>
        <a-menu-item key="app">
          <template #icon>
            <shop-outlined />
          </template>
          门店
        </a-menu-item>
        <a-sub-menu key="sub1">
          <template #icon>
            <user-outlined />
          </template>
          <template #title>用户</template>
          <a-menu-item-group title="Item 1">
            <a-menu-item key="setting:1">Option 1</a-menu-item>
            <a-menu-item key="setting:2">Option 2</a-menu-item>
          </a-menu-item-group>
          <a-menu-item-group title="Item 2">
            <a-menu-item key="setting:3">Option 3</a-menu-item>
            <a-menu-item key="setting:4">Option 4</a-menu-item>
          </a-menu-item-group>
        </a-sub-menu>
        <a-sub-menu key="buycard">
          <template #icon>
            <car-outlined />
          </template>
          <template #title>购物车</template>
          <a-menu-item-group title="购物商品">
            <a-menu-item v-for="(item, index) in store.state.buycarts" :key="item.id">
              <div class="prod-item">
                <div class="left">
                  <img :src="item.imgSrc" :alt="item.title">
                </div>
                <div class="middle">
                  <div class="title">{{item.title}}</div>
                  <div class="content">
                    <span class="num">数量：{{ item.num }}</span>
                    <div class="control">
                      <span class="btn" @click.stop="store.commit('addBuycartsNum', index)">+</span>
                      <span class="btn" @click.stop="store.commit('minusBuycartsNum', index)">-</span>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="price">¥ {{ item.price * item.num }}</div>
                </div>
              </div>
            </a-menu-item>
            <a-menu-item key="totalPrice">
              <div class="total">
                <span>总价：</span>
                <span class="num">¥ {{ store.getters.totalPrice }}</span>
              </div>
            </a-menu-item>
          </a-menu-item-group>
        </a-sub-menu>
      </a-menu>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";

const store = useStore();
import { QuestionOutlined, UserOutlined, CarOutlined, ShopOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import {ref} from 'vue';
const router = useRouter();
let value = ref(null);
const data = ref({
  value:'',
  current: ['']
});
function onSearch(){

}
</script>

<style scoped lang="less">
@import '@css/zhtt-var.less';
.zhtt-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: @header-zindex;
  width:100%;
  background: #fff;
  box-shadow: 0 0 10px #ccc;
  transition: all 0.5s;

  .logo{
    width:200px;
  }
  .search{
    flex:1;
  }
  .menus{
    width:400px;
  }
}
.zhtt-header.hidden {
  transform: translate(0, -100%);
}
</style>
